﻿@{
    ViewBag.Title = "Widgets";
    ViewBag.Description = "widgets";
    Layout = "~/Views/Shared/_Default.cshtml";
}

<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().Icon(FontAwesome.Check).Caption("Default Widget").Closeable().Collapsable().Maximizable()))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>Modal Body</p>
                    }
                }
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().Icon(FontAwesome.Check).Caption("Colorful Widget").Closeable("darkorange").Collapsable("blue").Maximizable("pink")))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>Modal Body</p>
                    }
                }
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().Collapse().Icon(FontAwesome.ArrowsV).HeaderIconColor(BootstrapColors.Blue).Caption("Collapsed Widget").Closeable("darkorange").Collapsable("blue")))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>
                            This Widget is collapsed by default.
                        </p>
                    }
                }
            </div>

        </div>
        <h5 class="row-title before-blue">Colored Widgets</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().HeaderColor(BootstrapColors.Palegreen).Icon(FontAwesome.ArrowDown).Caption("Colored Header").Closeable().Collapsable().Maximizable()))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <code>
                            class="widget-header bg-palegreen"
                        </code>
                    }
                }
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().HeaderColor(BootstrapColors.Danger).Icon(FontAwesome.ArrowUp).Caption("Colored Header").Closeable().Collapsable().Maximizable()))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <code>
                            class="widget-header bg-danger"
                        </code>
                    }
                }
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().HeaderColor(BootstrapColors.Blue).Icon(FontAwesome.ArrowLeft).Caption("Colored Header").Closeable().Collapsable().Maximizable()))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <code>
                            class="widget-header bg-blue"
                        </code>
                    }
                }
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().HeaderColor(BootstrapColors.Blueberry).Icon(FontAwesome.ArrowRight).Caption("Colored Header").Closeable().Collapsable().Maximizable()))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <code>
                            class="widget-header bg-blue"
                        </code>
                    }
                }
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().HeaderColor(BootstrapColors.Magenta).BodyColor(BootstrapColors.Magenta).Caption("Colored Header and Body").Closeable().Collapsable().Maximizable()))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    }
                }
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().HeaderColor(BootstrapColors.Warning).BodyColor(BootstrapColors.Danger).Caption("Colored Header and Body").Closeable().Collapsable().Maximizable()))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    }
                }
            </div>
        </div>
        <h5 class="row-title before-darkorange">Bordered Widgets</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().Caption("Bordered Header on Bottom").HeaderBorder(BootstrapColors.Sky, Direction.Bottom)))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    }
                }
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().Caption("Bordered Header on Top").HeaderBorder(BootstrapColors.Pink, Direction.Top)))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    }
                }
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().Caption("Bordered Header on Left").HeaderBorder(BootstrapColors.Blueberry, Direction.Left).BodyBorder(BootstrapColors.Blue, Direction.Left)))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    }
                }
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget">
                    <div class="widget-header bordered-bottom bordered-white bg-sky">
                        <span class="widget-caption">Bordered and Colored Widget</span>
                        <div class="widget-buttons">
                            <a href="#" data-toggle="maximize">
                                <i class="fa fa-expand"></i>
                            </a>
                            <a href="#" data-toggle="collapse">
                                <i class="fa fa-minus"></i>
                            </a>
                        </div><!--Widget Buttons-->
                    </div><!--Widget Header-->
                    <div class="widget-body bg-sky bordered-bottom bordered-white">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div><!--Widget Body-->
                </div><!--Widget-->
            </div>
        </div>
        <h5 class="row-title before-pink">Widget Behavior</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().Flat().Caption("Flat Widget").Closeable("darkorange").Maximizable("pink")))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    }
                }
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().Flat().Caption("Flat Widget With Border").Closeable("darkorange").Maximizable("pink").HeaderBorder(BootstrapColors.Yellow, Direction.Bottom)))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    }
                }
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().RadiusBordered().Caption("Radius-Bordered Widget").Closeable("darkorange").Maximizable("blue")))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    }
                }
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().Transparent().Caption("Transparent Widget").Closeable("darkorange").Maximizable("blue")))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    }
                }
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().Flat().RadiusBordered().Lined().Caption("Lined Widget").Closeable("darkorange").Maximizable("blue")))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    }
                }
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().Separated().Caption("Separated Header and Body").Closeable("darkorange").Maximizable("blue")))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    }
                }
            </div>
        </div>

        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().Compact().Caption("Compact Widget Buttons").Closeable().Maximizable().Collapsable()))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    }
                }
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget()))
                {
                    using (widget.BeginBody())
                    {
                        <span class="widget-caption">Widget Without Header</span>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    }
                }
            </div>
        </div>
        <h5 class="row-title before-sky">Elements in Widget Header</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget">
                    <div class="widget-header">
                        <span class="widget-caption">Widget with Dropdown</span>
                        <div class="widget-buttons">
                            <div class="btn-group">
                                <a class="btn btn-blue btn-sm " href="javascript:void(0);">Actions</a>
                                <a class="btn btn-blue btn-sm dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown-menu dropdown-blue pull-left">
                                    <li>
                                        <a href="javascript:void(0);">Action</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);">Another action</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);">Something else here</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="javascript:void(0);">Separated link</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="widget-body">

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget">
                    <div class="widget-header">
                        <span class="widget-caption">Widget with ProgressBar</span>
                        <div class="widget-buttons toolbar-bordered ">
                            <div class="progress" style="width: 150px;">
                                <div class="progress-bar progress-bar-palegreen" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
                                    <span class="sr-only">
                                        20% Complete
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-body">

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget flat radius-bordered">
                    <div class="widget-header bg-magenta bordered-bottom bordered-warning">
                        <span class="widget-caption">Colored Widget with ProgressBar</span>
                        <div class="widget-buttons">
                            <div class="progress progress-striped" style="width: 150px;">
                                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                    <span class="sr-only">
                                        20% Complete (success)
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-body">

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget">
                    <div class="widget-header bg-palegreen">
                        <span class="widget-caption">Colored Widget with Bordered ProgressBar</span>
                        <div class="widget-buttons">
                            <div class="progress progress-bordered progress-striped active" style="width: 150px;">
                                <div class="progress-bar progress-bar-darkorange" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                    <span class="sr-only">
                                        20% Complete (success)
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="widget-body">

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget">
                    <div class="widget-header">
                        <span class="widget-caption">Widget with ON/OFF Switch</span>
                        <div class="widget-buttons buttons-bordered">
                            <label>
                                <input class="checkbox-slider toggle colored-blue" type="checkbox">
                                <span class="text"></span>
                            </label>
                        </div>
                        <div class="widget-buttons buttons-bordered">
                            <label>
                                <input class="checkbox-slider colored-darkorange" type="checkbox">
                                <span class="text"></span>
                            </label>
                        </div>
                        <div class="widget-buttons buttons-bordered">
                            <label>
                                <input class="checkbox-slider slider-icon colored-success" type="checkbox">
                                <span class="text"></span>
                            </label>
                        </div>
                    </div>
                    <div class="widget-body">

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget">
                    <div class="widget-header">
                        <span class="widget-caption">Widget with Badges and Labels</span>
                        <div class="widget-buttons">
                            <span class="badge badge-info graded">
                                7
                            </span>
                        </div>
                        <div class="widget-buttons buttons-bordered">
                            <span class="label label-info">
                                info
                            </span>
                        </div>
                    </div>
                    <div class="widget-body">

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget radius-bordered">
                    <div class="widget-header">
                        <span class="widget-caption">Widget with Input</span>
                        <div class="widget-buttons">
                            <span class="input-icon">
                                <input type="text" class="form-control input-xs" id="glyphicon-search" placeholder="Search">
                                <i class="glyphicon glyphicon-search blue"></i>
                            </span>
                        </div>
                    </div>
                    <div class="widget-body">

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget radius-bordered">
                    <div class="widget-header">
                        <span class="widget-caption">Widget with Paging</span>
                        <div class="widget-buttons ">
                            <ul class="pagination pagination-sm">
                                <li class="disabled"><a href="#">«</a></li>
                                <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">»</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="widget-body">

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget radius-bordered">
                    <div class="widget-header">
                        <span class="widget-caption">Widget with Small Buttons</span>
                        <div class="widget-buttons buttons-bordered">
                            <button class="btn btn-default btn-sm">Cancel</button>
                        </div>
                        <div class="widget-buttons buttons-bordered">
                            <button class="btn btn-default btn-sm">Save</button>
                        </div>
                    </div>
                    <div class="widget-body">

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget radius-bordered">
                    <div class="widget-header">
                        <span class="widget-caption">Widget with Mini Buttons</span>
                        <div class="widget-buttons buttons-bordered">
                            <button class="btn btn-darkorange btn-xs">Cancel</button>
                        </div>
                        <div class="widget-buttons buttons-bordered">
                            <button class="btn btn-blue btn-xs">Save</button>
                        </div>
                    </div>
                    <div class="widget-body">

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>

                    </div>
                </div>
            </div>
        </div>
        <h5 class="row-title before-warning">Widget Sizes</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().HeaderSize(BootstrapSizes.Small).Caption("Small Widget Header").Closeable("darkorange").Collapsable("blue").Maximizable("pink")))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    }
                }
              </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                @using (WidgetBuilder<dynamic> widget = Html.Bootstrap().Begin(new Widget().HeaderSize(BootstrapSizes.Large).Caption("Small Widget Header").Closeable("darkorange").Collapsable("blue").Maximizable("pink")))
                {
                    using (WidgetSectionPanel header = widget.BeginHeader())
                    {
                    }
                    using (widget.BeginBody())
                    {
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                    }
                }
            </div>
        </div>
    </div>
</div>
